<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.productName" placeholder="产品名称" class="handle-input mr10"></el-input>
				<el-input v-model="query.productDesc" placeholder="产品描述" class="handle-input mr10"></el-input>
                <el-select v-model="query.type" placeholder="请选择类型" class="handle-input mr10">  
                    <el-option label="次数" value="1"></el-option>  
                    <el-option label="模型" value="2"></el-option>  
                </el-select>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="productId" label="产品ID" align="center"></el-table-column>
				<el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
				<el-table-column prop="productDesc" label="产品描述" align="center"></el-table-column>
				<el-table-column prop="quota" label="数量" align="center"></el-table-column>
				<el-table-column prop="price" label="价格" align="center"></el-table-column>
				<el-table-column prop="type" label="产品种类" align="center">
					<template #default="scope">
						<span v-if="scope.row.type === 1">次数类型</span>
						<span v-else-if="scope.row.type === 2">模型类型</span>
						<span v-else>未知类型（{{ scope.row.state }}）</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
				<el-table-column prop="updateTime" label="更改时间" align="center"></el-table-column> -->
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)" v-permiss="16">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>
<!-- 新增框弹出 -->
		<el-dialog title="新增" v-model="addVisible" width="70%">
			<el-form label-width="70px">
                <el-form-item label="产品编号">
					<el-input v-model="addForm.productId"></el-input>
				</el-form-item >
				<el-form-item label="产品名称">
					<el-input v-model="addForm.productName"></el-input>
				</el-form-item >
				<el-form-item label="产品描述">
					<el-input v-model="addForm.productDesc"></el-input>
				</el-form-item >
                <el-form-item label="商品价格">
					<el-input v-model="addForm.price"></el-input>
				</el-form-item >
				
				<el-form-item label="商品类型">
                <el-select v-model="addForm.type" placeholder="请选择类型" class="handle-input mr10">  
                    <el-option label="次数" value="1"></el-option>  
                    <el-option label="模型" value="2"></el-option>  
                </el-select>
				</el-form-item>
				<el-form-item label="次数额度" v-if="addForm.type === '1'">
					<el-input v-model="addForm.quota"></el-input>
				</el-form-item>
				<el-form-item label="支持模型" v-if="addForm.type === '2'">
					<el-input v-model="addForm.productModelTypes" placeholder="支持的AI模型" ></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveAdd">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		
		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="30%">
			<el-form label-width="70px" :model = "editForm">
				<el-form-item label="产品名称" prop = "productName">
					<el-input v-model="editForm.productName"></el-input>
				</el-form-item >
				<el-form-item label="产品描述" prop = "productDesc">
					<el-input v-model="editForm.productDesc"></el-input>
				</el-form-item >
                <el-form-item label="商品价格" prop = "price">
					<el-input v-model="editForm.price"></el-input>
				</el-form-item >
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { addProduct, deleteProduct, editProduct, queryProductList } from '../api/lottery';

interface TableItem {
    id: number;  
    productId: number;  
    productName: string;  
    productDesc: string;  
    quota: number;  
    productModelTypes: string;
    price: number;
    type: number;  
    createTime: string;  
    updateTime: string;  
}

const query = reactive({
	productName:null,
    productDesc:null,
    type:null,
	pageNum: 1,
	pageSize: 10
});
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
	queryProductList(query).then(res => {
		console.log(res)
		tableData.value = res.data.productVoList;
		pageTotal.value = res.data.pageTotal || 0;
	});
};
getData();
// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};



// 新增弹出框
const addVisible = ref(false);
let addForm = reactive({
    productId: null,
    productName: '',  
    productDesc: '',  
    quota: null,  
    productModelTypes: '',
    price: null,
    type: null
});
const handleAdd = () => {
	addVisible.value = true;
};
const saveAdd = () => {
	addVisible.value = false;
	console.log("新增数据:" , JSON.stringify(addForm))
	addProduct(addForm).then(res => {
		if(res.data.code === "0000"){
				ElMessage.success(res.data.info);
				getData();
			}else{
				ElMessage.error(res.data.info);
			}
	})
};


let deleteParam = reactive({
	productId: null
});

// 删除操作
const handleDelete = (index: number, row: any) => {
	// 二次确认删除
	// console.log("当前行数据:", deleteParam);
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			deleteProduct(row.productId).then((resp) => {
				if (resp.data.code == "0000") {
					ElMessage.success('删除成功');
					tableData.value.splice(index, 1);
				} else {
					ElMessage.warning(resp.data.info);
				}

			})
		})
		.catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let editForm = 
	ref({
    productId: null,
    productName: '',  
    productDesc: '',   
    price: null,
}
);
let idx: number = -1;

// 填充编辑表格内容
const handleEdit = (index: number, row: any) => {
	idx = index;
	console.log("目标row数据：", row);
	editForm.value = row;
	console.log("编辑栏中数据：", editForm.value);
	editVisible.value = true;
};
// 提交编辑
const saveEdit = () => {
	editVisible.value = false;
	console.log("修改数据:" , JSON.stringify(editForm.value))
	// 调用后端更新
	editProduct(editForm.value).then(res => {
		if(res.data.code === "0000"){
				ElMessage.success(res.data.info);
				getData();
			}else{
				ElMessage.error(res.data.info);
			}
	})

};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.block:last-child {
  border-right: none;
}
.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.block .date-picker-container {
  display: flex;
  align-items: center;
}
</style>
